﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/masterpage/Main.Master" CodeBehind="gallery.aspx.cs" Inherits="SmartyParty.gallery" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" ID="content1" runat="server">
    	<script type="text/javascript">
    	    $(document).ready(function () {
    	        /*
			 *  Simple image gallery. Uses default settings
			 */

    	        $('.fancybox').fancybox();

    	        /*
			 *  Different effects
			 */

    	        // Change title type, overlay opening speed and opacity
    	        $(".fancybox-effects-a").fancybox({
    	            helpers: {
    	                title: {
    	                    type: 'outside'
    	                },
    	                overlay: {
    	                    speedIn: 500,
    	                    opacity: 0.95
    	                }
    	            }
    	        });

    	        // Disable opening and closing animations, change title type
    	        $(".fancybox-effects-b").fancybox({
    	            openEffect: 'none',
    	            closeEffect: 'none',

    	            helpers: {
    	                title: {
    	                    type: 'over'
    	                }
    	            }
    	        });

    	        // Set custom style, close if clicked, change title type and overlay color
    	        $(".fancybox-effects-c").fancybox({
    	            wrapCSS: 'fancybox-custom',
    	            closeClick: true,

    	            helpers: {
    	                title: {
    	                    type: 'inside'
    	                },
    	                overlay: {
    	                    css: {
    	                        'background-color': '#eee'
    	                    }
    	                }
    	            }
    	        });

    	        // Remove padding, set opening and closing animations, close if clicked and disable overlay
    	        $(".fancybox-effects-d").fancybox({
    	            padding: 0,

    	            openEffect: 'elastic',
    	            openSpeed: 150,

    	            closeEffect: 'elastic',
    	            closeSpeed: 150,

    	            closeClick: true,

    	            helpers: {
    	                overlay: null
    	            }
    	        });

    	        /*
			 *  Button helper. Disable animations, hide close button, change title type and content
			 */

    	        $('.fancybox-buttons').fancybox({
    	            openEffect: 'none',
    	            closeEffect: 'none',

    	            prevEffect: 'none',
    	            nextEffect: 'none',

    	            closeBtn: false,

    	            helpers: {
    	                title: {
    	                    type: 'inside'
    	                },
    	                buttons: {}
    	            },

    	            afterLoad: function () {
    	                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    	            }
    	        });


    	        /*
			 *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
			 */

    	        $('.fancybox-thumbs').fancybox({
    	            prevEffect: 'none',
    	            nextEffect: 'none',

    	            closeBtn: false,
    	            arrows: false,
    	            nextClick: true,

    	            helpers: {
    	                thumbs: {
    	                    width: 50,
    	                    height: 50
    	                }
    	            }
    	        });
    	    });
    </script>
    <style type="text/css">
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}
	</style>
    <div style="margin-left:auto;margin-right:auto;height:500px;text-align:center;font-size:20px;">
    <div id="fancybox-loading"></div>
    <p>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/barbie1_big.jpg"><img src="images/gallery/barbie1_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/car1_big.jpg"><img src="images/gallery/car1_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/car2_big.jpg"><img src="images/gallery/car2_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/farm1_big.jpg"><img src="images/gallery/farm1_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/farm2_big.jpg"><img src="images/gallery/farm2_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/farm3_big.jpg"><img src="images/gallery/farm3_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/farmcake1_big.jpg"><img src="images/gallery/farmcake1_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/minimouse1_big.jpg"><img src="images/gallery/minimouse1_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/princess1_big.jpg"><img src="images/gallery/princess1_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/princess2_big.jpg"><img src="images/gallery/princess2_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/princess3_big.jpg"><img src="images/gallery/princess3_small.jpg" alt="" width="150" height="150" /></a>
		<a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/princess4_big.jpg"><img src="images/gallery/princess4_small.jpg" alt="" width="150" height="150" /></a>
	</p></div>
</asp:Content>
